<template>
	<article class="kp-coupon">
		<div class="kp-coupon-banner">
			<img src="../../../assets/coupon.png" />
		</div>
		<div class="kp-coupon-list">
			<div class="kp-cl-li" @click="couponLists(8)">
				<span><img src="../../../assets/c-1.png" /></span>
				<p>电影优惠劵</p>
			</div>
			<div class="kp-cl-li" @click="couponLists(3)">
				<span><img src="../../../assets/c-2.png" /></span>
				<p>火车优惠劵</p>
			</div>
			<div class="kp-cl-li" @click="couponLists(2)">
				<span><img src="../../../assets/c-3.png" /></span>
				<p>景区优惠劵</p>
			</div>
			<div class="kp-cl-li" @click="couponLists(1)">
				<span><img src="../../../assets/c-4.png" /></span>
				<p>酒店优惠劵</p>
			</div>
			<div class="kp-cl-li" @click="couponLists(4)">
				<span><img src="../../../assets/c-5.png" /></span>
				<p>汽车优惠劵</p>
			</div>
		</div>
	</article>
</template>

<script>
export default {
  data () {
	return {
	   qvalue: '小小张',
	}
  },
  mounted(){//载入后执行
  },
  created() {//创建后
	  
  },
  watch: {//监听放置
  },
  methods: {//方法放置
	couponLists(index){
//		console.log(index)
		this.$router.push({
			path:'/my/coupon/couponList',
			query:{
				ptype:index
			}
		})
	}
  },
  components:{
  }
}
</script>

<style scoped>
/* //手机号部分 */
.kp-coupon{
	width: 100%;
	background: #f4f5f9;
	height: 100vh;
	overflow: hidden;
}
.kp-coupon-banner{
	padding-top: 86px;
	width: 750px;
	height: 300px;
	margin-bottom: 30px;
	box-sizing: content-box;
}
.kp-coupon-banner img{
	width: 750px;
	height: 300px;
}
.kp-cl-li{
	height: 130px;
	width: 692px;
	background: #fff url(../../../assets/right-3.png) no-repeat 640px center;
	background-size: 22px 40px;
	margin: 0 auto;
	border-radius: 15px;
	margin-bottom: 20px;
	line-height: 130px;
	display: flex;
}
.kp-cl-li span{
	width: 69px;
	display: table;
	height: 130px;
	padding: 0 36px 0 20px;
}
.kp-cl-li span img{
	vertical-align: middle;
	width: 69px;
	height: 44px;
	display: inline-block;
}
.kp-cl-li p{
	flex: 1;
	font-size: 32px;
	color: rgb(51,51,51);
}
</style>
